<template>
  <pay-page
    icon="icon-leftangel"
    title="选择支付方式"
  >
    <div class="flex-v pay-type-wrapper">
      <div>
        <div
          class="flex-h flex-vc fontsize32"
          v-for="(payMap,index) in payList"
          :key="index"
          @click="payMap.type!==3 && payMap.type!==5?chooseType(payMap,index):''"
          :class="{'icon-disable':payMap.type===3 || payMap.type===5, 'xb_border eee':index!==0}"
        >
          <div
            v-if="payMap.type===3 || payMap.type===5"
            class="flex-v"
          >
            <div class="flex-h">
              <span class="payNameEllipsis">{{payMap.paymentName}}</span>
              <span v-if="payMap.balance">（{{payMap.balance}}元）</span>
            </div>
            <span class="fontsize24">{{payMap.statusTips}}</span>
          </div>

          <div
            v-else
            class="flex-h line-height32"
          >
            <span class="payNameEllipsis">{{payMap.paymentName}}</span>
            <span v-if="payMap.type===1">({{payMap.bankCardShortNo}})</span>
            <span v-if="payMap.balance">（{{payMap.balance}}元）</span>
          </div>

          <span
            class="flex1"
            v-if="payMap.type!==3"
          ></span>
          <i
            v-if="payMap.type!==3"
            :class="[value===index?'iconfont icon-choose icon-select-active':getPayType(payMap.type)]"
          ></i>
        </div>
      </div>
    </div>
  </pay-page>
</template>

<script>
import BasePayPage from './BasePayPage'
import * as PayType from '../../contants/PayType.js'
export default {
  components: {
    'pay-page': BasePayPage
  },
  props: {
    // 当前选中的支付的索引
    value: {
      type: Number,
      default: 0
    },
    // 支付列表
    payList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    // 选中某一个支付方式后的处理
    chooseType(payMap, index) {
      this.$emit('choose', payMap, index)
    },
    // 根据支付类型设置右侧图标className
    getPayType(type) {
      let typeName = ''
      switch (type) {
        case PayType.UNIONPAY_CARD_ADD:
          typeName = 'iconfont icon-rightangel icon-right'
          break
        case PayType.UNIONPAY_CARD:
        case PayType.WALLET:
        case PayType.ALIPAY:
          typeName = 'iconfont icon-circle icon-selectable'
          break
      }
      return typeName
    }
  }
}
</script>

<style>
.pay-type-wrapper {
  height: 780px;
}
.pay-type-wrapper > div {
  padding: 0 30px;
  max-height: 780px;
  overflow: hidden auto;
}
.pay-type-wrapper > div > div {
  height: 120px;
  color: #333;
}
.line-height32 {
  line-height: 32px;
}
.payNameEllipsis {
  max-width: 480px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-selectable {
  font-size: 34px;
  color: #ccc;
}
.icon-select-active {
  font-size: 26px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  color: #fff;
  background-color: #64db53;
  text-align: center;
  line-height: 32px;
}
.icon-disable {
  color: #999 !important;
}
.icon-right {
  font-size: 26px;
  margin-right: 15px;
  color: #ccc;
}
</style>
